<script setup>
  import { onMounted, ref } from 'vue'
  import { useRoute } from 'vue-router'
  import PageHeader from "@/components/PageHeader.vue";
  import { getEvaListApi } from '@/api'
  const route = useRoute()
  const evaList = ref([])
  import EvaItem from "@/components/EvaItem.vue";
  onMounted(() => {
    const { id } = route.query
    getEvaListApi({goods_id: id}).then(res => {
      console.log(res)
      evaList.value = res.data
    })
  })
</script>

<template>
  <div class="eva-list">
    <PageHeader>
      <a-button type="primary" size="small" style="background: var(--primary)"> 加入购物车 </a-button>
    </PageHeader>
    <div class="list">
      <EvaItem :is-nav="false" :is-list="true" :eva="item" v-for="item in evaList" :key="item.id"/>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .eva-list {
    padding: 50px 0;
    .list {
      gap: 20px;
      display: flex;
      flex-direction: column;
    }
  }
</style>